<html>
	<body>
		<script src="http://www.google.com/jsapi" type="text/javascript"></script>
		<script type="text/javascript">
			function getEditorValue() {
				return document.getElementById('_actorval').value;
			}
		</script>
		<div id="actorsdiv">
			<center><h3>Select Actor</h3></center>
			<script type='text/javascript'>
google.load('visualization', '1', {packages:['orgchart']});
google.setOnLoadCallback(drawActors);
function drawActors() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Technology');
data.addColumn('string', 'Parent');
data.addColumn('string', 'ToolTip');
data.addRows([
['Mark', '', 'Mark'],
['John', 'Mark', 'John'],
['Mary', 'Mark', 'Mary'],
['Jordan', 'Mary', 'Jordan'],
['Eli', 'Mary', 'Eli'],
['Ivan', 'Mary', 'Ivan'],
['Sarah', 'John', 'Sarah'],
['Mike', 'John', 'Mike']
]);
var chart = new google.visualization.OrgChart(document.getElementById('allactorsdiv'));
chart.draw(data, {allowHtml:true});

google.visualization.events.addListener(chart, 'select', function() {
document.getElementById('_actorval').value = data.getValue(chart.getSelection()[0].row, 0);
});
}
			</script>
			<div id='allactorsdiv'></div>
			<form>
				<input type="hidden" name="_actorval" id="_actorval" value="">
			</form>
		</div>
	</body>
</html>